<template>
	<view class="container">
		<order-detail-shop :shop='shop'></order-detail-shop>
		<view class="split-line">
			<order-detail-form :order='order'></order-detail-form>
		</view>
		<view class="image-desc-info">
			<image-text Title="客户描述" :problem-desc-text="order.customerProfile" :images="order.beforeRepairPhoto"  ></image-text>
			<view v-for="item in imageTitle" :key="item.id">
				<view class="upload-image-box">
					<image-text :Title="item.value" :problemDescText="order[item.id + 'Desc']" :images="order[item.id + 'Photo']" ></image-text>
				</view>
			</view>
		</view>
		<view v-if="order.orderStep >= 4" class="order-info-panel">
			<view>店铺报价</view>
			<view class="info-value">￥{{order.payPrice}}</view>
		</view>
		<!-- 用户确认报价阶段 -->
		<view v-if="order.orderStep == 4 && !isMasterOrShopOwner">
			<order-detail-confirm-price @signed="signStatusHandle" ref="orderConfirm"></order-detail-confirm-price>
		</view>
		<!-- 客户操作 -->
		<cover-view v-if="order.orderStep == 4 && !isMasterOrShopOwner" class="operation-container">
			<button class="cancel-btn" @click="cancelOrder" >取消订单</button>
			<button class="confirm-btn" @click="confirmToAgreePricing">￥{{order.payPrice}} 同意并确认报价</button>
		</cover-view>
		<!-- 店铺操作 -->
		<cover-view v-if="order.orderStep >= 4 && order.orderStep <= 5 && isMasterOrShopOwner" class="operation-container">
			<button class="cancel-btn" @click="cancelOrder" >取消订单</button>
			<button class="confirm-btn" @click="confirmPayed" :disabled="!order.agreeRepair">确认已支付</button>
		</cover-view>
		
		<!-- 取消订单 -->
		<cover-view v-if="order.orderStep == 5 && !isMasterOrShopOwner" class="operation-container">
			<button class="cancel-btn-lg" @click="cancelOrder" >取消订单</button>
		</cover-view>
	</view>
</template>

<script>
	import orderDetailShop from '@/components/order-detail-shop.vue'
	import orderDetailForm from '@/components/order-detail-form.vue'
	import orderDetailConfirmPrice from '@/components/order-detail-confirm-price.vue'
	import imageText from "@/components/image-text.vue";
	export default {
		components:{orderDetailShop,orderDetailForm,imageText,orderDetailConfirmPrice},
		data() {
			return {
				shop:{
					shopname:'',
					locationtext:'',
				},
				order:{
					customerSignature: '',
					agreeRepair: false
				},
				userInfo: {},
				isMasterOrShopOwner: false,
				imageTitle: [{
					value: "正面照片及描述(只能上传1张图片)",
					id: 'positiveItem'
				}, {
					value: "背面照片及描述(只能上传1张图片)",
					id: 'backItem'
				}, {
					value: "侧面照片及描述(只能上传1张图片)",
					id: 'sideItem'
				}, {
					value: "故障面照片及描述(只能上传1张图片)",
					id: 'problem'
				}]
			}
		},
		// 接收传入的参数
		onLoad(param) {
			if(param.order) this.order = JSON.parse(param.order)
			if(param.shop) this.shop = JSON.parse(param.shop)
			this.userInfo = this.$userInfo.getUserInfo()
			this.isMasterOrShopOwner = this.$userInfo.isMasterOrShopOwner()
			this.setSelectorValue()
		},
		onPullDownRefresh() {
			this.$login.checkTokenValidity().then(() => {
				this.loadOrderInfo();
			}).catch(res => {
				console.log('catch...',res)
			})
			// 防抖
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			loadOrderInfo(orderId) {
				orderId = orderId || this.order.id;
				this.$api.apiGet({
					url: `/api/order/${orderId}`,
				}).then(res => {
					console.log('请求ok！', res)
					this.order = res.data.data;
					this.setSelectorValue();
				}).catch(res => {
					this.$msg.showMessage(res.data.msg || "请求失败！")
					this.showCtrl.orderDetail = false;
				})
			},
			setSelectorValue(order){
				let dicrval = this.$dict.getSelector('strap_material_select', 0)
				order = order || this.order;
				// 品牌 watch_brand_id watchBrandId
				order.watchBrandId = this.$dict.getSelector('brand_select',order.watchBrandId);
				// 手表功能 watch_function watchFunction
				order.watchFunction = this.$dict.getSelector('function_select',order.watchFunction);
				// 机芯类别 watch_movement watchMovement
				order.watchMovement = this.$dict.getSelector('movement_category_select',order.watchMovement);
				// 表带材质 watchband_material watchbandMaterial
				order.watchbandMaterial = this.$dict.getSelector('strap_material_select',order.watchbandMaterial);
				// 表壳材质 case_material caseMaterial
				order.caseMaterial = this.$dict.getSelector('case_material_select',order.caseMaterial);
				// 表扣材质 clasp_material claspMaterial
				order.claspMaterial = this.$dict.getSelector('buckle_material_select',order.claspMaterial);
				// 外观品相 watch_exterior watchExterior
				order.watchExterior = this.$dict.getSelector('appearance_select',order.watchExterior);
				// 维修部件 repair_parts repairParts
				order.repairParts = this.$dict.getSelector('repair_parts_select',order.repairParts);
				// 是否保价 is_insure insure
				order.insure = this.$dict.getSelector('insurance_select', (order.insure?1:0));
				// 是否维修过 is_repair repair
				order.repair = this.$dict.getSelector('isrepair_select', order.repair?1:0);
				this.order = order;
			},
			signStatusHandle() {
				this.order.customerSignature = this.$refs.orderConfirm.getImg()
				this.order.agreeRepair = true
			},
			// 确认报价
			confirmToAgreePricing() {
				this.$login.checkTokenValidity().then(login => {
					if (!this.order.agreeRepair) {
						uni.showToast({
							title: '签名未上传完成，请稍等或重新签名！',
							icon: 'none'
						})
						return 
					}
					let orderId = this.order.id
					this.$api.apiPost({
						url: `/api/order/${orderId}/repair/confirm`,
						data: {
							customerSignature: this.order.customerSignature,
							isAgreeRepair: this.order.agreeRepair
						}
					}).then(res => {
						uni.showToast({
							title: '已确认报价！',
							icon: 'none'
						})
						this.$websocket.sendData({
							orderId: this.order.id,
							orderStep: this.order.orderStep,
							notifyShopId:this.order.shopId
						})
						uni.navigateBack()
					}).catch(res => {
						uni.showToast({
							title: '确认报价失败！',
							icon: 'none'
						})
					})
				})
			},
			// 确认支付
			confirmPayed() {
				this.$login.checkTokenValidity().then(login => {
					uni.showModal({
						title: '是否已支付？',
						cancelText: '未支付',
						confirmText: '已支付',
						success(result) {
							if (result.confirm) {
								let orderId = this.order.id
								this.$api.apiPost({
									url: `/api/order/${orderId}/repair/doubleConfirm`
								}).then(res => {
									uni.showToast({
										title: '已确认支付！',
										icon: 'none'
									})
									this.$websocket.sendData({
										orderId: this.order.id,
										orderStep: this.order.orderStep,
										notifyCustomerId: this.order.customerId
									})
									uni.navigateBack()
								}).catch(res => {
									uni.showToast({
										title: '确认支付失败！',
										icon: 'none'
									})
								})
							}
						}
					})
					
				})
			},
			// 取消订单
			cancelOrder() {
				this.$login.checkTokenValidity().then(login => {
					uni.showModal({
						title: '是否要取消订单？',
						cancelText: '不取消',
						confirmText: '确认取消',
						success(result) {
							if (result.confirm) {
								let orderId = this.order.id
								this.$api.apiPost({
									url: `/api/order/${orderId}/repair/cancel`
								}).then(res => {
									uni.showToast({
										title: '已取消订单！',
										icon: 'none'
									})
									this.$websocket.sendData({
										orderId: this.order.id,
										orderStep: this.order.orderStep,
										notifyShopId:this.order.shopId
									})
									uni.navigateBack()
								}).catch(res => {
									uni.showToast({
										title: '取消订单失败！',
										icon: 'none'
									})
								})
							}
						}
					})
					
				})
			}
		}
		
	}
</script>

<style>
	.container {
		padding-bottom: 140rpx;
	}
	.order-info-panel {
		margin-top: 20rpx;
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
	}
	.info-value {
		color: #009245;
	}

	/*图片上传*/
	.upload-image-box {
		margin-top: 20rpx;
	}
	.operation-container{
		position:fixed;
		bottom:0;
		width:100%;
		line-height: 0rpx;
		z-index:100;
	}
	.cancel-btn{
		width:40%;
		height:140rpx;
		line-height: 140rpx;
		text-align: center;
		font-size: 32rpx;
		color:#666;
		background-color: #fff;
		border-top: #EEEEEE 1px solid;
		border-radius: 0rpx ;
		display: inline-block;
		z-index: 999;
	}
	.cancel-btn-lg {
		width: 100%;
		height:140rpx;
		line-height: 140rpx;
		text-align: center;
		font-size: 32rpx;
		color:#fff;
		background-color: #009245;
		border-top: #EEEEEE 1px solid;
		border-radius: 0rpx ;
		display: inline-block;
		z-index: 999;
	}
	.confirm-btn{
		width:60%;
		height:140rpx;
		line-height: 140rpx;
		text-align: center;
		font-size: 32rpx;
		color:#fff;
		background-color: #009245;
		border-top: #EEEEEE 1px solid;
		border-radius: 0rpx ;
		display: inline-block;
		z-index: 999;
		
	}
</style>
